<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>客户端连接异常统计</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <#include '/inc/frontResources.html'>
</head>
<body class="hold-transition sidebar-mini layout-navbar-fixed">
  <div class="wrapper">
    <!-- Header End -->
    <#include "/inc/head.html">
    <div class="content-wrapper ml-0">
      <div class="content">
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-body">
                  <div class="row">
                    <form method="get" action="${request.contextPath}/client/show/exceptionStatistics/client" id="clientExceptionStatisticsForm">
                      <div class="row">
                        <div class="d-flex justify-content-end">
                          <label class="col-form-label" style="font-weight:bold;text-align:left;">
                            &nbsp;查询日期:&nbsp;&nbsp;
                          </label>
                          <div class="col-auto">
                            <input type="date" class="form-control" size="20" name="searchDate" id="searchDate" value="${searchDate!}">
                          </div>
                          <label>&nbsp;<input type="submit" class="btn btn-info" value="查询"/></label>
                        </div>
                      </div>
                      <div class="row">
                        <h4>&nbsp;&nbsp;应用：<label class="label label-success">${appId!}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          查询时间：<label class="label label-success">${searchDate!}</label>
                        </h4>
                      </div>
                      <div class="dropdown-divider"></div>

                      <div class="row card-title">
                        <div class="d-flex justify-content-start">
                          <#assign client_needSelect="0">
                          <label class="col-auto">
                            &nbsp;客户端:
                          </label>
                          <#list clientConfigMap?keys as key>
                            <#assign item=key>
                            <#if (key_index < 5)>
                              <div class="col-auto form-check">
                                <input type="radio" name="client_optionsRadios" value="${item!}"
                                <#if firstClient?? && (firstClient == item)>checked="checked"</#if>
                                  onchange="changeClientChart(this.value)"/>
                                  ${item!}&nbsp;
                              </div>
                            <#else>
                              <#assign client_needSelect="1">
                            </#if>
                          </#list>
                          <div class="col-auto">
                            <#if (client_needSelect?number == 1)>
                              <div class="row">
                                <label class="col-auto">
                                  &nbsp;其他:
                                </label>
                                <div class="col-auto">
                                  <select name="optionsRadios" onchange="changeClientChart(this.value)">
                                    <option>请选择</option>
                                    <#list clientConfigMap?keys as key>
                                      <#assign item=key>
                                      <#if (key_index >= 5)>
                                        <label>
                                          <option value="${item!}" <#if firstClient?? && (firstClient == item)>selected</#if>>
                                          ${item!}
                                          </option>
                                        </label>
                                      </#if>
                                    </#list>
                                  </select>
                                </div>
                              </div>
                            </#if>
                          </div>
                        </div>
                      </div>
                      <input type="hidden" name="appId" value="${appId!}">
                      <input type="hidden" id="firstClient" name="firstClient" value="${firstClient!}">
                      <input type="hidden" id="exceptionType" name="exceptionType" value=0>
                    </form>
                    <div class="dropdown-divider"></div>
                  </div>

                  <script type="text/javascript">
                    var searchDate = '${searchDate}';
                    //应用下某客户端某命令的统计情况
                    var appClientExceptionStatisticsMap = '${appClientExceptionStatisticsJson}';
                    var appClientExceptionStatisticsJson = eval("(" + appClientExceptionStatisticsMap + ")");

                    Highcharts.setOptions({
                      global: {
                        useUTC: false
                      }
                    });
                    Highcharts.setOptions({
                      colors: ['#2f7ed8', '#E3170D', '#0d233a', '#8bbc21', '#1aadce',
                        '#492970', '#804000', '#f28f43', '#77a1e5',
                        '#c42525', '#a6c96a']
                    });

                    function changeClientChart(value) {
                      document.getElementById("firstClient").value = value;
                      document.getElementById("clientExceptionStatisticsForm").submit();
                    }

                    $(document).ready(
                            function () {
                              var data = appClientExceptionStatisticsJson;

                              var count_unit = "次数";
                              var count_appTotalOptions = getOption("countContainer", "<b>" + "连接异常次数</b>", count_unit);
                              count_appTotalOptions.series = getClientStatisticsByType(data, 'count', count_unit, searchDate);
                              var count_appTotalchart = new Highcharts.Chart(count_appTotalOptions);

                              //cost
                              var cost_unit = "毫秒";
                              var cost_appTotalOptions = getOption("costContainer", "<b>" + "连接异常平均耗时</b>", cost_unit);
                              cost_appTotalOptions.series = getClientStatisticsByType(data, 'cost', cost_unit, searchDate);
                              var cost_appTotalchart = new Highcharts.Chart(cost_appTotalOptions);
                            });
                  </script>

                  <div class="row">
                    <label class="col-auto">
                      &nbsp;&nbsp;Jedis配置：
                    </label>
                    <#if firstClient?? && clientConfigMap?? && clientConfigMap[firstClient]??>
                      <#assign configs = clientConfigMap[firstClient]>
                    </#if>
                    <div class="col-auto">
                      <select class="label label-info w-100" style="border: 0;">
                        <#list configs! as item>
                          <option>${item!}</option>
                        </#list>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <div id="countContainer" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
              <br/>
              <div id="costContainer" style="max-width: 100%; min-width: 310px; height: 350px; margin: 0 auto"></div>
              <br/>
              <div class="card">
                <div class="card-header">
                  <h4 class="card-title">
                    redis节点连接异常统计表
                  </h4>
                </div>
                <div class="card-body table-responsive">
                  <table id="instanceDetailTable" class="table table-striped table-hover table-bordered" style="margin-top: 0px">
                    <thead>
                    <tr>
                      <td>序号</td>
                      <td>redis实例</td>
                      <td>异常总次数</td>
                      <td>平均耗时(单位:毫秒)</td>
                    </tr>
                    </thead>
                    <tbody>
                    <#list appNodeExceptionStatisticsList as item>
                      <tr>
                        <td>${item_index}</td>
                        <td>${item.node!}</td>
                        <td>${item.count!}</td>
                        <td>${item.cost!}</td>
                      </tr>
                    </#list>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <#include "/inc/footer.html">
  </div>
</body>
</html>